<template>
	<div>
		<el-table
			:data="tableData"
			style="width: 100%"
			@selection-change="selectChange"
			ref="refTable"
			:height="height"
			:size="props.size"
			row-key="id"
			@row-click="rowClick"
			:scrollbar-always-on="true"
			v-bind="$attrs"
		>
			<el-table-column v-if="isSelection" type="selection" width="55" />
			<el-table-column
				v-if="isIndex"
				label="序号"
				type="index"
				width="100"
				align="center"
			/>
			<el-table-column
				v-for="item in tableHead"
				:key="item"
				:prop="item.prop"
				:label="item.label"
				:width="item.width"
				:min-width="item.minWidth"
				:formatter="item.formatter"
				:fixed="item.fixed"
				:align="item.align?item.align:'center'"
				show-overflow-tooltip
			>
				<template #default="{ row, column, $index }">
					<span v-if="item.isImg">
						<!-- img为单个 -->
						<img
							v-if="item.isImg instanceof String"
							:src="item.isImg"
							:alt="item.label"
							width="100"
							height="100"
						/>

						<span v-else-if="item.isImg instanceof Array">
							<img
								v-if="row[item.prop]"
								:src="item.isImg[0]"
								:alt="item.label"
								width="100"
								height="100"
							/>
							<img v-else :src="item.isImg[1]" :alt="item.label" />
						</span>
					</span>
					<span v-else-if="item.isSvg">
						<!-- svg为单个 -->
						<svg-icon
							v-if="item.isSvg instanceof String"
							:icon-class="item.isSvg"
							class="icon"
						/>

						<span v-else-if="item.isSvg instanceof Array">
							<svg-icon
								v-if="row[item.prop]"
								:icon-class="item.isSvg[0]"
								class="icon"
							/>
							<svg-icon v-else :icon-class="item.isSvg[1]" class="icon" />
						</span>
					</span>
					<span v-else-if="item.slot">
						<slot :name="item.slot" :row="{...row,$index:$index}" />
					</span>
					<span v-else-if="item.formatter">
						<span v-html="item.formatter(row)"></span>
					</span>
					<span v-else :style="item?.style ? { ...item.style } : {}">{{
						row[item.prop]===null?'-':row[item.prop]===''?'-':row[item.prop]
					}}</span>
				</template>
			</el-table-column>
			<!-- //如果表格需要操作按钮 -->
			<slot name="operate"></slot>
			<slot name="name"></slot>
		</el-table>
	</div>
</template>
<script setup>
import { ElTable, ElTableColumn } from "element-plus";
import { reactive, ref, onMounted } from "vue";
const state = reactive({
	slotList: [],
});
const props = defineProps({
	//表格大小
	size: {
		default: "default",
		type: String,
	},
	//是否多选变单选
	isRadio: {
		default: true,
		type: Boolean,
	},
	//高度
	height: {
		default: "500px",
	},
	//是否需要序号
	isIndex: {
		default: true,
		type: Boolean,
	},
	//是否需要多选
	isSelection: {
		default: true,
		type: Boolean,
	},
	tableHead: {
		type: Array,
		default: () => [],
	},
	tableData: {
		type: Array,
		default: () => [],
	},
});
const refTable = ref(null);
const emits = defineEmits(["selectChange",'rowClick']);

const selectChange = (e) => {
	let result = e;
	if (props.isRadio && e.length > 1) {
		let [row] = e.slice(-1);
		result = [row];
		refTable.value.clearSelection();
		refTable.value.toggleRowSelection(row, true);
	}
	emits("selectChange", result);
};
//table全选
const checkAll = (e) => {
	refTable.value.toggleAllSelection();
};
defineExpose({

	checkAll,
});
//行点击事件
const rowClick=(row)=>{
	emits('rowClick',row)
}
//循环加入插槽

onMounted(() => {
	props.tableHead.forEach((item) => {
		if (item.slot) {
			state.slotList.push(item.slot);
		}
	});
});
</script>
